@model List<zhangmenren.Models.ViewModle.WorksModel>
@{
}

<style>
    .j-souo {
        width: 30%;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        background: #00a5bb;
        padding-left: 0px;
        padding-right: 0px;
        position: relative;
    }
   
    

</style>
<div class="bg-white">

	<header class="mui-bar mui-bar-nav head-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href='@Url.Action("Index","Home")'></a>
		<h1 class="mui-title">远程教学</h1>
		<a class="mui-icon mui-icon-more mui-pull-right" onclick="jsBridge.share()"></a>
	</header>
    
	<!--DOM -->
	<div class="mui-content bg-white">
		<!-- Swiper -->
		<div class="swiper-container index-banner-swiper">
			<div class="swiper-wrapper">
				@if (ViewBag.Banner != null && (ViewBag.Banner as List<BannerEntity>)?.Count > 0)
				{
					foreach (var item in ViewBag.Banner as List<BannerEntity>)
					{
						<div class="swiper-slide">
							<img class="swiper-lazy" data-src="@item.ImgUrl" />
						</div>
					}
				}
				else
				{

					<div class="swiper-slide">
						<img class="swiper-lazy" data-src="/images/ycjx-banner-img1.jpg" alt="" />
					</div>
				}
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<!---->
        <div class="search-item-box excellent-search-box">
            <span class="search-head mui-text-center">
                按名称
            </span>

            <div class="search-body">

                <input type="text" placeholder="请输入搜索内容" class="j-souoval" />

            </div>
            @*<span class="search-footer mui-text-center">
            按名称
        </span>*@
            @*<span class="search-head mui-text-center">
            搜索
        </span>*@
            <a href="javascript:;" class="j-souo">搜索</a>
        </div>
		<!---->
		<ul class="mui-table-view excellent-course-list ycjx-list">

			@foreach (var item in Model)
			{
				<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right" href='@Url.Action("Detail",new{id=item.Id})'>
						<div class="mui-media-object mui-pull-left">
							<img src="@item.CoverImg">
						</div>
						<div class="mui-media-body">
							<h5 class="mui-ellipsis-2">@item.Title</h5>
							<p>@(item.Price == 0 ? "免费" : "￥" + item.Price.ToString("0.##"))</p>
							<p>@item.GouMaiNum 人购买</p>
						</div>
					</a>
				</li>
			}


			@*<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right" href='ycjx-content.html'>
						<div class="mui-media-object mui-pull-left">
							<img src="images/excellent-list-img1.jpg">
						</div>
						<div class="mui-media-body">
							<h5 class="mui-ellipsis-2">smart3D EPS SSK 课程</h5>
							<p>￥232.80 </p>
							<p>23人购买</p>
						</div>
					</a>
				</li>*@

		</ul>
	</div>

</div>
@section Scripts{
	<script type="text/javascript" charset="utf-8">

		var swiper = new Swiper('.index-banner-swiper', {
			slidesPerView: 3,
			speed: 700,
			spaceBetween: 10,
			slidesPerView: 'auto',
			centeredSlides: true,
			loop: true,
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			autoplay: {
				delay: 3000,
				stopOnLastSlide: false,
				disableOnInteraction: false,
			},
			lazy: {
				loadPrevNext: true,
				loadOnTransitionStart: false,
				loadPrevNextAmount: 1,
			},
		});
		
			$(".j-souo").click(function () {
							$.ajax({
								type:'post',
								url:'@Url.Action("Search")',
								data:{key:$.trim($('.j-souoval').val())},
								success:function(result){
									if (result.state=="ok") {
										var htmls='';
										if (result.data.length>0) {
											for (let i = 0; i < result.data.length; i++) {
												var str=(result.data[i].price-0)==0?'免费': '￥'+ result.data[i].price;
												
												htmls+='<li class="mui-table-view-cell mui-media"><a class="mui-navigate-right" href="/YuanChengJX/Detail?id='+result.data[i].id+'"><div class="mui-media-object mui-pull-left"><img src="'+result.data[i].coverImg+'"></div><div class="mui-media-body"><h5 class="mui-ellipsis-2">'+result.data[i].title+'</h5><p>'+str+' </p><p>'+result.data[i].gouMaiNum+'人购买</p></div></a></li>';
		
											}
										}else{
											htmls="<span>暂无数据</span>"
										}
										
				
										$('.ycjx-list').html(htmls);
									}
									
								}
							})
						})		
		
		
	</script>
}